<template>
  <div class="login" >

	   
 		<Form ref="formData" :model="formData" :rules="ruleInline" :label-width="100" class="dict-form">
			  <h3 class="title">后台管理系统</h3>
	            <FormItem prop="account" label="账户">
					<Input type="text" class="login-input" v-model="formData.account" placeholder="请输入账户"  />
				</FormItem>
	           <FormItem prop="password" label="密码">
					<Input type="password"   class="login-input" v-model="formData.password" placeholder="请输入密码" />
				</FormItem>

           <Row type="flex" justify="space-around" class="code-row-bg" >
				<Col span="18">
                  <Button class="el-button--primary" type="success" style="width: 300px;" @click="dictSubmit('formData')" >登录</Button>
				</Col>
			</Row>

		</Form>

  </div>
</template>
<script>
export default {
  name: "Login",
		data() {
			return {
				groupFlag: false,
				formData: {
					account: "",
					password: "",
				},
				ruleInline: {
					account: [{
						required: true,
						message: "账户不能为空",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}]
				}
			};
		},
		methods: {
			async dictSubmit(form) {
        
        		console.log(form);
                    
				this.$refs[form].validate(async valid => {
					if (valid) {
						console.log(this.formData);

						const result = await this.$api.login(this.formData);

						console.log(result);
						if (result.code === 1) {
							this.$Message.success("保存成功!");
							this.loading = false;
							this.$emit("func"); //关闭父级modal
							 
							window.location.href = "/";
						}else {
							this.$Message.warning(result.errMsg);
							// this.$emit("func"); //关闭父级modal
						}

					}
				});
			},
			closeModal() {
				this.$emit("funclose"); //关闭父级modal
			}
		},
  mounted() {
    console.log("222");
  }
}
</script>

<style >

.login {
  background-image:url(../assets/background.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
}


.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
}

.dict-form {
    border-radius: 6px;
    background: #ffffff;
    width: 380px;
    padding: 25px 25px 25px 15px;
}


</style>

